iT邦幫忙

2021 iThome 鐵人賽

DAY 25
0
自我挑戰組

React自我學習心得30天~系列 第 25

DAY25 在React中加入CSS

  • 分享至 

  • xImage
  •  

今天要介紹在React Component中加入CSS的方式。

  • 用字串的方式為className命名
    render() {
    return Menu
    }
  • 透過props或state的方式帶入class的名字
render() {
  let className = 'menu';
  if (this.props.isActive) {
    className += ' menu-active';
  }
  return <span className={className}>Menu</span>
}

React中製作動畫效果

除了用CSS中的Keyframe製作動畫效果外,也可以使用前人寫好的React動畫套件,以下用react-transition-group作介紹:

套件安裝

npm install react-transition-group --save

安裝完後,可以看到官方文件裡面有介紹幾個重要的Component。

  • Transition
  • CSSTransition
  • TransitionGroup
  • SwitchTransition

使用CSSTransition

引入欲使用的Component。

import { CSSTransition } from 'react-transition-group'

套用CSSTransition到原有的靜態架構中。

 return (
    <div>
      <CSSTransition in={inProp} timeout={200} classNames="my-node">
        <div>
          {"I'll receive my-node-* classes"}
        </div>
      </CSSTransition>
    </div>
  );
}

CSSTransition的屬性介紹:

  • in:判斷是否要出現該動畫
  • timeout:動畫持續時間
  • classNames:針對該動畫給他一個獨立的命名,可以視作namespace。

修改動畫效果

除了使用套件裡面附的動畫效果外,也可以自訂義一個動畫效果,下列為動畫進入時狀態改變的屬性:

  • namespace-enter: 動畫進入前的樣式或是稱作初始值
  • namespace-enter-active:進入動畫直到完成時之前的 CSS 樣式;
  • namespace-exit:動畫退出前的 CSS 樣式;
  • namespace-exit-active:退出動畫直到完成時之前的的 CSS 樣式。
.my-node-enter {
  opacity: 0;
}
.my-node-enter-active {
  opacity: 1;
  transition: opacity 200ms;
}
.my-node-exit {
  opacity: 1;
}
.my-node-exit-active {
  opacity: 0;
  transition: opacity 200ms;
}

上一篇
Day24 React專案資料夾分類方式
下一篇
Day26 了解Hook
系列文
React自我學習心得30天~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言